<!-- 电商规划 -->
<template>
  <div>
    <div class="upload-component">
      <div class="download-template" @click="downloadTemplate">下载模板</div>
      <div class="import-btn" @click="importHandle" v-loading="importLoading">
        <div class="btn-img"></div>
        {{ "导入" }}
      </div>
    </div>
    <el-tabs v-model="activeName" class="parent-tabs">
      <el-tab-pane label="日目标动作" name="rmbdz">
        <rmbdz ref="rmbdz"></rmbdz>
      </el-tab-pane>
      <el-tab-pane label="大促日目标动作" name="dcrmbdz">
        <dcrmbdz ref="dcrmbdz"></dcrmbdz>
      </el-tab-pane>
      <el-tab-pane label="月计划" name="yjh">
        <yjh ref="yjh"></yjh>
      </el-tab-pane>
      <el-tab-pane label="费用规划表" name="fyghb">
        <fyghb ref="fyghb"></fyghb>
      </el-tab-pane>
    </el-tabs>
    <!-- 增删查改页面 -->
    <el-dialog v-dialogDrag :close-on-click-modal="false" :visible="showDialog" width="56rem"
      :before-close="closeDialog">
      <template #title>
        <div class='dialog-title'>
          <div class="cicle"></div>
          上传文件
        </div>
      </template>
      <div class="body" v-if="!!showDialog" v-loading="uploading">
        <file-control ref="myFileControl1" :limit='3' :pFileList="[]"
          :placeholder="'请上传'" 
          style="height:16rem"></file-control>
      </div>
      <div class="tool-bar">
        <div class="cancel-btn" @click="closeDialog">关闭</div>
        <div class="submit-btn" @click="handleSubmitFile">确定</div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { service } from "@/services/backServices"
import FileControl from '@/components/common/FileControl.vue';
import { saveAs } from "file-saver";
// 日目标动作
import rmbdz from "./dsghSon/rmbdz.vue"
// 大促日目标动作
import dcrmbdz from "./dsghSon/dcrmbdz.vue"
// 月计划
import yjh from "./dsghSon/yjh.vue"
// 费用规划表
import fyghb from "./dsghSon/fyghb.vue"

export default {
  data() {
    return {
      activeName: "rmbdz",
      importLoading: false,
      showDialog: false,
      uploading: false,
    };
  },
  components: { rmbdz, dcrmbdz, yjh, fyghb, FileControl },
  computed: {
    uploadUrl() {

      const urlMapping = {
        rmbdz: 'uploadTargetActionPlanDay',
        dcrmbdz: 'uploadPromotionTargetActionDay',
        yjh: 'uploadEcommercePlanBalanceMonth',
        fyghb: 'uploadEcommerceTier1ExpensePlanMonth'
      };
      return urlMapping[this.activeName] 
    
    }
    
  },
  created() { },
  mounted() { },
  methods: {
    importHandle() {
      if (this.importLoading) return
      this.showDialog = true
    },
    downloadTemplate() {
      let importName = "目标及动作日表上传表"
      saveAs(`/local/${importName}.xlsx`, importName + ".xlsx");

      importName = "大促目标及动作日表上传表"
      saveAs(`/local/${importName}.xlsx`, importName + ".xlsx");

      importName = "电商计划月表上传表"
      saveAs(`/local/${importName}.xlsx`, importName + ".xlsx");

      importName = "电商一级费用规划月表上传表"
      saveAs(`/local/${importName}.xlsx`, importName + ".xlsx");

      // 调用接口 记录下载操作记录  
      let myForm = new FormData()
      myForm.append("operationfile", importName)
      service({
        method: 'post',
        url: "addDownloadOperationRecord",
        data: myForm,
      })

    },
    importFile() {

    },
    closeDialog() {
      this.showDialog = false
    },
    handleSubmitFile() {
      let _this = this;
      const fileList1 = this.$refs.myFileControl1.fileList
      if (fileList1.length == 0) {
        this.$message({
          message: '文件不能为空',
          type: 'warning'
        });
        return
      }
      let fileForm = new FormData();
      fileForm.append('file', fileList1[0])
      _this.importLoading = true
      _this.showWhich = "";
      _this.showDialog = false
      service({
        headers: {
          'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundaryqs8javp5GsOgKvoQ'
        },
        method: 'post',
        url: _this.uploadUrl,
        data: fileForm,
      }).then(res => {
        _this.importLoading = false
        if (res.data.code == 200) {
          console.log(_this.$refs.rmbdz.$refs.sonTable.getTableData)
          _this.$refs.rmbdz.$refs.sonTable.getTableData();

          console.log(_this.$refs.dcrmbdz.$refs.sonTable.getTableData)
          _this.$refs.dcrmbdz.$refs.sonTable.getTableData();

          console.log(_this.$refs.yjh.$refs.sonTable.getTableData)
          _this.$refs.yjh.$refs.sonTable.getTableData();

          console.log(_this.$refs.fyghb.$refs.sonTable.getTableData)
          _this.$refs.fyghb.$refs.sonTable.getTableData();
          // rmbdz, dcrmbdz, yjh, fyghb,
          _this.$notify({
            message: "信息上传成功！",
            type: "success",
            position: "bottom-right",
            duration: 2000,
          });
        }
      }).catch((e) => {
        console.log(e)

        _this.importLoading = false
        _this.$notify({
          message: "信息上传失败！",
          type: "error",
          position: "bottom-right",
          duration: 2000,
        });
      })
    },
  }
}
</script>

<style lang='less' scoped>
.upload-component {
  position: absolute;
  display: flex;
  right: 45px;
  top: 21px;
  align-items: center;
  z-index: 10;
}

.parent-tabs {
  height: 100%;
  margin: 16px;

  ::v-deep {
    .el-tabs__content {
      height: calc(100% - 85px);

      .el-tab-pane {
        height: 100%;

        .mainTable {
          height: 100%;

          .tablePage {
            border: 0;
          }
        }
      }
    }
  }
}
</style>